<template>
  <div>
    <el-card class="box-1">
      <div slot="header">
        <span>{{ title }}</span>
      </div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="系统头像：">
          <ws-upload-single-img v-model="form['wechat_pic']" :path="form['wechat_pic']?ImageUrl+form['wechat_pic']:''"/>
        </el-form-item>
        <el-form-item label="证件照：">
          <ws-upload-single-img v-model="form['real_avatar']" :path="form['real_avatar']?ImageUrl+form['real_avatar']:''"/>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作状态：" prop="job_status">
          <el-select v-model="form.job_status" placeholder="请选择工作状态">
            <el-option :value="1" label="在职" />
            <el-option :value="0" label="离职" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop="company_id">
          <el-select v-model="form.company_id" placeholder="请选择所属部门">
            <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="职务：" prop="position">
          <el-input v-model="form.position" />
        </el-form-item>
        <el-form-item label="员工等级：" prop="grade">
          <el-input v-model="form.grade" />
        </el-form-item>
        <el-form-item label="工号：" prop="job_number">
          <el-input v-model="form.job_number" />
        </el-form-item>
        <el-form-item label="手机：" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="入职时间" prop="hiredate">
          <el-date-picker v-model="form.hiredate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="入职表图片：">
          <div class="remark">*注:最多传三张图</div>
          <ws-upload-multiple-img v-model="form['form_pic_list']" :path="form['form_pic_url']" :limit="3"/>
        </el-form-item>
        <el-form-item label="入职简历：">
          <div class="remark">*注:可上传多张图片</div>
          <ws-upload-multiple-img v-model="form['resume_pic_list']" :path="form['resume_pic_url']"/>
        </el-form-item>
        <el-form-item label="转正时间" prop="formal_time">
          <el-date-picker v-model="form.formal_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="转正申请表图片：">
          <div class="remark">*注:最多传三张图</div>
          <ws-upload-multiple-img v-model="form['application_form_pic_list']" :path="form['application_form_pic_url']" :limit="3"/>
        </el-form-item>
        <el-form-item label="身份证号码：">
          <el-input v-model="form.idcard_no"/>
        </el-form-item>
        <el-form-item label="身份证正反面：">
          <div class="remark">*注:最多传两张图</div>
          <ws-upload-multiple-img v-model="form['identity_card_pic_list']" :path="form['identity_card_pic_url']" :limit="2"/>
        </el-form-item>
        <el-form-item label="出生年月：">
          <el-date-picker v-model="form.birth_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="chooseBirthday"/>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input-number v-model="form.age" :min="1" :max="100" controls-position="right" />
        </el-form-item>
        <el-form-item label="身高：">
          <el-input v-model="form.stature" />
        </el-form-item>
        <el-form-item label="民族：">
          <el-input v-model="form.nation" />
        </el-form-item>
        <el-form-item label="籍贯：">
          <el-input v-model="form.native_place" />
        </el-form-item>
        <el-form-item label="户口类型：">
          <el-radio-group v-model="form.isCity">
            <el-radio :label="true">城市</el-radio>
            <el-radio :label="false">非城市</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="户口所在地：">
          <el-input v-model="form.reg_permanent_type" />
        </el-form-item>
        <el-form-item label="婚姻状况：">
          <el-radio-group v-model="form.marital_status">
            <el-radio :label="0">未婚</el-radio>
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="2">离异</el-radio>
            <el-radio :label="3">丧偶</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="政治面貌：">
          <el-input v-model="form.political_affiliation" />
        </el-form-item>
        <el-form-item label="最高学历：">
          <el-input v-model="form.highest_edu" />
        </el-form-item>
        <el-form-item label="学位：">
          <el-input v-model="form.degree" />
        </el-form-item>
        <el-form-item label="技术职称：">
          <el-input v-model="form.technical_title" />
        </el-form-item>
        <el-form-item label="证书图片：">
          <div class="remark">*注:可上传多张图片</div>
          <ws-upload-multiple-img v-model="form['certificate_pic_list']" :path="form['certificate_pic_url']"/>
        </el-form-item>
        <el-form-item label="体检报告：">
          <div class="remark">*注:可上传多张图片</div>
          <ws-upload-multiple-img v-model="form['examination_pic_list']" :path="form['examination_pic_url']"/>
        </el-form-item>
        <el-form-item label="其他图片：">
          <div class="remark">*注:可上传多张图片</div>
          <ws-upload-multiple-img v-model="form['other_pic_list']" :path="form['other_pic_url']"/>
        </el-form-item>
        <el-form-item label="社保号：">
          <el-input v-model="form.social_security_no" />
        </el-form-item>
        <el-form-item label="公积金账号：">
          <el-input v-model="form.public_reserve_funds" />
        </el-form-item>
        <el-form-item label="当前住址：">
          <el-input v-model="form.current_address" />
        </el-form-item>
        <el-form-item label="家庭住址：">
          <el-input v-model="form.home_address" />
        </el-form-item>
        <el-form-item label="固定电话：">
          <el-input v-model="form.tel_phone" />
        </el-form-item>
        <el-form-item label="紧急联系人：">
          <el-input v-model="form.binduser_name" />
        </el-form-item>
        <el-form-item label="紧急联系人电话：">
          <el-input v-model="form.binduser_phone" />
        </el-form-item>
        <el-form-item label="教育/培训经历：">
          <el-button type="success" class="bg-green" @click="dialogVisible=true">添加教育/培训经历</el-button>
          <el-table :data="form.education_history1" style="border:1px solid #ddd">
            <el-table-column label="起止时间" min-width="180">
              <template slot-scope="scope">
                {{ scope.row.startStopTime[0]+'-'+scope.row.startStopTime[1] }}
              </template>
            </el-table-column>
            <el-table-column prop="school" label="学校" />
            <el-table-column prop="major" label="专业" />
            <el-table-column prop="education" label="学历" />
            <el-table-column prop="degree" label="学位" />
            <el-table-column prop="studyWay" label="学习方式" />
            <el-table-column label="操作" min-width="160" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green" @click="toEditTraining(scope)" />
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDeleteTraining(scope.$index)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="工作经历：">
          <el-button type="success" class="bg-green" @click="dialogVisible2=true">添加工作经历</el-button>
          <el-table :data="form.work_history1" style="border:1px solid #ddd">
            <el-table-column label="起止时间" min-width="180">
              <template slot-scope="scope">
                {{ scope.row.startStopTime[0]+'-'+scope.row.startStopTime[1] }}
              </template>
            </el-table-column>
            <el-table-column prop="workunit" label="工作单位" min-width="130" />
            <el-table-column prop="station" label="职务(岗位)" />
            <el-table-column prop="exitReason" label="离职原因" />
            <el-table-column label="操作" min-width="160" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green" @click="toEditWorking(scope)" />
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDeleteWorking(scope.$index)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="外语语种：">
          <el-input v-model="form.foreigner_language" />
        </el-form-item>
        <el-form-item label="语种掌握程度：">
          <el-radio-group v-model="form.foreigner_language_status">
            <el-radio :label="0">一般</el-radio>
            <el-radio :label="1">熟练</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="计算机应用水平：">
          <el-input v-model="form.computer_science_level" />
        </el-form-item>
        <el-form-item label="技术/技能职称：">
          <el-input v-model="form.skill_title" />
        </el-form-item>
        <el-form-item label="是否会粤语：">
          <el-radio-group v-model="form.cantonese_skill_status">
            <el-radio :label="1">会</el-radio>
            <el-radio :label="0">不会</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="证书种类和等级：">
          <el-input v-model="form.certificate_info" />
        </el-form-item>
        <el-form-item label="最近雇主姓名：">
          <el-input v-model="form.lastest_employer_name" />
        </el-form-item>
        <el-form-item label="最近雇主职务：">
          <el-input v-model="form.lastest_employer_job" />
        </el-form-item>
        <el-form-item label="最近雇主电话：">
          <el-input v-model="form.lastest_employer_phone" />
        </el-form-item>
        <el-form-item label="家庭成员信息：">
          <el-input v-model="form.family_info" />
        </el-form-item>
        <el-form-item label="公司熟人名称">
          <el-input v-model="form.acquaintance_name" />
        </el-form-item>
        <el-form-item label="熟人所在部门">
          <el-input v-model="form.acquaintance_department" />
        </el-form-item>
        <el-form-item label="熟人职务">
          <el-input v-model="form.acquaintance_job" />
        </el-form-item>
        <el-form-item label="与熟人的关系">
          <el-input v-model="form.acquaintance_relation" />
        </el-form-item>
        <el-form-item label="领取的物品">
          <el-input v-model="form['goods_collection']"/>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
          <el-button type="primary" @click="$router.back(-1)">取消</el-button>
        </div>
      </el-form>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="教育/培训经历" width="520px" class="dialog" center @close="trainingForm={}">
      <el-form ref="trainingForm" :model="trainingForm" :rules="trainingFormRules" label-width="120px">
        <el-form-item label="起始时间" prop="startStopTime">
          <el-date-picker v-model="trainingForm.startStopTime" :editable="false" class="picker" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy.MM.dd" />
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="trainingForm.school" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="trainingForm.major" />
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-input v-model="trainingForm.education" />
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-input v-model="trainingForm.degree" />
        </el-form-item>
        <el-form-item label="学习方式" prop="studyWay">
          <el-input v-model="trainingForm.studyWay" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toAddTraining()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible2" title="工作经历" width="520px" class="dialog" center @close="workingForm={}">
      <el-form ref="workingForm" :model="workingForm" :rules="workingFormRules" label-width="120px">
        <el-form-item label="起始时间" prop="startStopTime">
          <el-date-picker v-model="workingForm.startStopTime" :editable="false" class="picker" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy.MM.dd" />
        </el-form-item>
        <el-form-item label="工作岗位" prop="workunit">
          <el-input v-model="workingForm.workunit" />
        </el-form-item>
        <el-form-item label="职务(岗位)" prop="station">
          <el-input v-model="workingForm.station" />
        </el-form-item>
        <el-form-item label="离职原因">
          <el-input v-model="workingForm.exitReason" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="toAddWorking">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { jsGetAge } from '../../../utils/index'
export default {
  data() {
    return {
      // 页面标题
      title: '',
      // 图片地址域名
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',
      // 公司列表
      companyList: [],

      // 教育培训经历表单弹窗是否显示
      dialogVisible: false,
      // 工作经历表单弹窗是否显示
      dialogVisible2: false,
      // 教育表或工作表选择的表格行
      tableIdx: null,
      // 教育培训经历表单弹窗
      trainingForm: {
        // 开始时间
        startStopTime: null,
        // 学习地址
        school: '',
        // 专业
        major: '',
        // 学历
        education: '',
        // 学位
        degree: '',
        // 学习方式
        studyWay: ''
      },
      // 工作经历表单弹窗
      workingForm: {
        // 开始时间
        startStopTime: null,
        // 工作岗位
        workunit: '',
        // 职务
        station: '',
        // 离职原因
        exitReason: ''
      },
      // 教育培训经历表单验证
      trainingFormRules: {
        startStopTime: [{ type: 'array', min: 2, message: '请选择日期', trigger: 'blur' },
          { required: true, message: '请选择日期', trigger: 'blur' }],
        school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        major: [{ required: true, message: '请输入专业名称', trigger: 'blur' }],
        education: [{ required: true, message: '请输入学历', trigger: 'blur' }],
        degree: [{ required: true, message: '请输入学位', trigger: 'blur' }]
      },
      // 工作经历表单验证
      workingFormRules: {
        startStopTime: [{ type: 'array', min: 2, message: '请选择日期', trigger: 'blur' },
          { required: true, message: '请选择日期', trigger: 'blur' }],
        workunit: [{ required: true, message: '请输入工作单位名称', trigger: 'blur' }],
        station: [{ required: true, message: '请输入职务(岗位)名称', trigger: 'blur' }]
      },

      form: {
        // 教育培训经历
        education_history1: [],
        // 工作经历
        work_history1: [],
        // 入职表图片地址
        form_pic_url: [],
        // 入职简历
        resume_pic_url: [],
        // 转正申请表图片地址的
        application_form_pic_url: [],
        // 身份证正反面图片地址
        identity_card_pic_url: [],
        // 证书图片地址
        certificate_pic_url: [],
        // 体检报告图片地址
        examination_pic_url: [],
        // 其他图片地址
        other_pic_url: []
      },
      formRules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        mobile: [{ required: true, message: '请填写手机号码', trigger: 'change' }],
        position: [{ required: true, message: '请输入职位', trigger: 'change' }],
        company_id: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        form_pic: [{ required: true, message: '请上传纸质版入职表的图片', trigger: 'blur' }],
        job_status: [{ required: true, message: '请选择工作状态', trigger: 'change' }]
      }
    }
  },
  watch: {
  },
  created() {
    this.title = this.$route.query.title
    this.getCompanyList()
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getData(this.$route.query.id)
    }
  },
  methods: {
    /**
     *  获取用户信息
     *  接口:'customer/detail/{id}'
     */
    getData(id) {
      const url = 'hr/getInfo/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.form = res.data['user_data']
        this.form.education_history ? this.form.education_history1 = JSON.parse(this.form.education_history) : (this.form.education_history1 = [])
        this.form.work_history ? this.form.work_history1 = JSON.parse(this.form.work_history) : (this.form.work_history1 = [])

        // 图片转为保存需要的string格式
        this.form.form_pic_list = this.form.form_pic ? this.form.form_pic.join(',') : '';
        // 选中的图片列表
        this.form.form_pic_url = [];
        for (const i in this.form.form_pic) {
          this.form.form_pic_url.push({ id: this.form.form_pic[i], url: this.ImageUrl + this.form.form_pic[i] });
        }

        // 图片转为保存需要的string格式
        this.form.resume_pic_list = this.form.resume_pic ? this.form.resume_pic.join(',') : '';
        // 选中的图片列表
        this.form.resume_pic_url = [];
        for (const i in this.form.resume_pic) {
          this.form.resume_pic_url.push({ id: this.form.resume_pic[i], url: this.ImageUrl + this.form.resume_pic[i] });
        }

        this.form.application_form_pic_list = this.form.application_form_pic ? this.form.application_form_pic.join(',') : '';
        this.form.application_form_pic_url = [];
        for (const i in this.form.application_form_pic) {
          this.form.application_form_pic_url.push({ id: this.form.application_form_pic[i], url: this.ImageUrl + this.form.application_form_pic[i] });
        }

        this.form.identity_card_pic_list = this.form.identity_card_pic ? this.form.identity_card_pic.join(',') : '';
        this.form.identity_card_pic_url = [];
        for (const i in this.form.identity_card_pic) {
          this.form.identity_card_pic_url.push({
            id: this.form.identity_card_pic[i],
            url: this.ImageUrl + this.form.identity_card_pic[i]
          });
        }

        this.form.certificate_pic_list = this.form.certificate_pic ? this.form.certificate_pic.join(',') : ''
        this.form.certificate_pic_url = []
        for (const i in this.form.certificate_pic) {
          this.form.certificate_pic_url.push({
            id: this.form.certificate_pic[i],
            url: this.ImageUrl + this.form.certificate_pic[i]
          })
        }

        this.form.examination_pic_list = this.form.examination_pic ? this.form.examination_pic.join(',') : ''
        this.form.examination_pic_url = []
        for (const i in this.form.examination_pic) {
          this.form.examination_pic_url.push({
            id: this.form.examination_pic[i],
            url: this.ImageUrl + this.form.examination_pic[i]
          })
        }

        this.form.other_pic_list = this.form.other_pic ? this.form.other_pic.join(',') : ''
        this.form.other_pic_url = []
        for (const i in this.form.other_pic) {
          this.form.other_pic_url.push({
            id: this.form.other_pic[i],
            url: this.ImageUrl + this.form.other_pic[i]
          })
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
     *  获取部门列表
     *  接口:'company/all-list'
     */
    getCompanyList() {
      const url = 'company/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.companyList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
     *  选择生日后计算年龄
     */
    chooseBirthday(e) {
      this.form.age = jsGetAge(e)
    },
    /**
     *  增加培训经历
     */
    toAddTraining() {
      this.$refs['trainingForm'].validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          if (this.tableIdx === null) {
            this.form.education_history1.push(this.trainingForm)
          } else {
            this.form.education_history1[this.tableIdx] = this.trainingForm
          }
          this.dialogVisible = false
          this.tableIdx = null
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    /**
     *  增加工作经历
     */
    toAddWorking() {
      this.$refs['workingForm'].validate((valid) => {
        if (valid) {
          this.dialogVisible2 = false
          if (this.tableIdx === null) {
            this.form.work_history1.push(this.workingForm)
          } else {
            this.form.work_history1[this.tableIdx] = this.workingForm
          }
          this.workingForm = {}
          this.tableIdx = null
        } else {
          return false
        }
      })
    },
    /**
     *  编辑培训经历
     */
    toEditTraining(scope) {
      this.dialogVisible = true
      this.trainingForm = scope.row
      this.tableIdx = scope.$index
    },
    /**
     *  编辑工作经历
     */
    toEditWorking(scope) {
      this.dialogVisible2 = true
      this.workingForm = scope.row
      this.tableIdx = scope.$index
    },
    /**
     *  删除培训经历
     */
    toDeleteTraining(index) {
      this.form.education_history1.splice(index, 1)
    },
    /**
     *  删除工作经历
     */
    toDeleteWorking(index) {
      this.form.work_history1.splice(index, 1)
    },

    /**
     * 单提交方法,通过判断有没有form_id执行添加或编辑操作
     * formName: form表单中ref的值,即表单名
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form

          console.log(data)
          data.form_pic = JSON.stringify(data['form_pic_list'] ? data['form_pic_list'].split(',') : [])
          data.application_form_pic = JSON.stringify(data['application_form_pic_list'].length > 0 ? data['application_form_pic_list'].split(',') : [])
          data.identity_card_pic = JSON.stringify(data['identity_card_pic_list'].length > 0 ? data['identity_card_pic_list'].split(',') : [])
          data.certificate_pic = JSON.stringify(data['certificate_pic_list'].length > 0 ? data['certificate_pic_list'].split(',') : [])
          data.examination_pic = JSON.stringify(data['examination_pic_list'].length > 0 ? data['examination_pic_list'].split(',') : [])
          data.other_pic = JSON.stringify(data['other_pic_list'].length > 0 ? data['other_pic_list'].split(',') : [])
          data.resume_pic = JSON.stringify(data['resume_pic_list'].length > 0 ? data['resume_pic_list'].split(',') : [])

          data.education_history = data.education_history1.length === 0 ? '[]' : JSON.stringify(data.education_history1)
          data.work_history = !data.work_history1.length === 0 ? '[]' : JSON.stringify(data.work_history1)
          console.log(data)

          const url = this.id ? 'hr/save/' + this.id : 'hr/add'
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title {
      font-weight: 600;
    }
    .remark {
      font-size: 13px;
      color: $textGray;
    }
    > div > .el-button {
      @extend .bg-green;
      width: 20%;
      min-width: 160px;
    }
  }
}
.el-checkbox {
  margin-right: 30px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}

.dialog {
  .picker {
    margin-right: 15px;
    width: 300px;
  }
  .el-input {
    width: 240px;
  }
}
</style>
